<!DOCTYPE html>  
<html lang="zh-CN">  
    <head>  
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">    
        <title>demo</title>     
        <meta name="description" content="jPaginate - jQuery Pagination Plugin" />
        <meta name="keywords" content="jquery, plugin, pagination, fancy" />
        <link href="css/bootstrap.min.css" rel="stylesheet">  
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
        <style type="text/css">
            .txt-l{
			}
			.txt-l-c{
			}
			.con{
				height:150px;
				overflow-y:scroll;
			}
			.txt{
                font-weight: normal;
            }
            .txt2{
                font-size: 12px;
            }
            .txt2 span{
                color: #337ab7;
            }
            th,td{
                text-align: center;
            }
            .btn-group-sm>.btn, .btn-sm{
                margin: 5px;
            }
            body{
                font-family: verdana;
                padding:0px;
                margin:0px;
                letter-spacing:2px;
            }
            .header{
                position:absolute;
                top:0px;
                left:0px;
                width:100%;
                height:80px;            
            }
            .demo{
                width:580px;
                padding:10px;
                margin:10px auto;
                background-color:#f7f7f7;

            }
        </style>
    </head> 
  
    <body>  
        <div class="panel-group">  
            <div class="panel panel-primary">  
                <div class="panel-heading">  
                    demo列表  
                </div>  
                <div class="panel-body">  
                    <div class="list-op" id="list_op">  
                        <input type="button" class="btn btn-default btn-sm"  value="标正面" onclick='upmark(1,4)'> 
                        <input type="button" class="btn btn-default btn-sm"  onclick="upmark(1,3)" value="标中性">
                        <input type="button" class="btn btn-default btn-sm"  onclick="upmark(1,2)" value="标负面">
                        <input type="button" class="btn btn-warning btn-sm"  onclick="upmark(1,12)" value="标低垃圾度"> 
                        <input type="button" class="btn btn-danger btn-sm"  onclick="upmark(1,11)" value="标高垃圾度"> 
                    </div>  
                </div>  
                <table class="table table-bordered table-hover">  
                    <thead>  
                        <tr style="height: 55px" >
                            <th>id</th>
                            <th>标题</th>
                            <th>正文</th>
                            <th>操作</th>
                        </tr>
                    </thead>  
                    <tbody id="datacontent">  
       
                    </tbody>  
                </table>  
                <div class="panel-footer" style="border-top: 1px solid #ccc;">  
                    <div class="txt txt2">共<span id="page"></span>页，总计<span id="sum"></span>条数据</div>  
                    <div class="demo"><div id="paginate"> </div></div>
                    <input type="hidden" name="selpage" value="1" id="selpage">
                </div> 
            </div>
        </div> 
        <script src="js/jquery.min.js "></script>  
        <script src="js/bootstrap.min.js "></script> 
        <script src="js/jquery.paginate.js"></script> 
        <script> 
            $(document).ready(function(){
                var hcpg = sessionStorage.getItem("selpage");
                if(hcpg!=null){
                    selpage=hcpg;
                    $("#selpage").val(selpage);
                }else{
                    selpage="1";
                }
                console.log(selpage);
                selectdata(selpage);
                var $thr = $('table thead tr');  
                var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');  
                /*将全选/反选复选框添加到表头最前，即增加一列*/  
                $thr.prepend($checkAllTh);
                initTableCheckbox(); 
                var page=$("#page").text();
                var mid=$("#selpage").val();
                $("#paginate").paginate({
                    count       : page,
                    start       : mid,
                    display     : 20,
                    border                  : true,
                    border_color            : '#ccc',
                    text_color              : '#2573AF',
                    background_color        : '#fff',  
                    border_hover_color      : '#fff',
                    text_hover_color        : '#fff',
                    background_hover_color  : '#2573AF',
                    images                  : false,
                    mouse                   : 'press',
                    onChange                : function(page){
                        var dstpage = $(".jPag-current").text();
                        $("#selpage").val(dstpage);
                        selectdata(dstpage);
                        initTableCheckbox();
                        }  
                });
                sessionStorage.clear();
            });
            /*
                js加复选框
             */
            function initTableCheckbox() {  
                var $thr = $('table thead tr');  
                var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');  
                /*将全选/反选复选框添加到表头最前，即增加一列*/  
                //$thr.prepend($checkAllTh);  
                /*“全选/反选”复选框*/  
                var $checkAll = $thr.find('input');  
                $checkAll.click(function(event){  
                    /*将所有行的选中状态设成全选框的选中状态*/  
                    $tbr.find('input').prop('checked',$(this).prop('checked'));  
                    /*并调整所有选中行的CSS样式*/  
                    if ($(this).prop('checked')) {  
                        $tbr.find('input').parent().parent().addClass('info');  
                    } else{  
                        $tbr.find('input').parent().parent().removeClass('info');  
                    }  
                    /*阻止向上冒泡，以防再次触发点击操作*/  
                    event.stopPropagation();  
                });  
                /*点击全选框所在单元格时也触发全选框的点击操作*/  
                $checkAllTh.click(function(){  
                    $(this).find('input').click();  
                });  
                var $tbr = $('table tbody tr');  
                var $checkItemTd = $('<td><input type="checkbox" name="checkItem" value="" class="xzcheck"/></td>');  
                /*每一行都在最前面插入一个选中复选框的单元格*/  
                $tbr.prepend($checkItemTd);  
                /*点击每一行的选中复选框时*/  
                $tbr.find('input').click(function(event){  
                    /*调整选中行的CSS样式*/  
                    $(this).parent().parent().toggleClass('info');  
                    /*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/  
                    $checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);  
                    /*阻止向上冒泡，以防再次触发点击操作*/  
                    event.stopPropagation();  
                });  
                /*点击每一行时也触发该行的选中操作*/  
                $tbr.click(function(){  
                    $(this).find('.xzcheck').click();  
                });  
            }  
            function getcheck(){//批量操作
                var arr = [];
                var cbox = document.getElementsByName("checkItem");
                for(var i=0,v,l = cbox.length; v = cbox[i],i<l; i++){
                    if (v.checked){
                        var par=v.parentNode.parentNode.getElementsByTagName("th").msgid.innerText;
                        arr.push(par);
                    }
                }
                return arr;
            }
            function selectdata(page) {
                $.ajax({
                    type: "POST",
                    url: "./demoselect.php" ,
                    data: {"page":page},
                    async:false,
                    dataType:'html',
                    success: function (res) {
                        //console.log(res);
                        if(res){
                            html="";
                            var con=JSON.parse(res);
                            $("#page").html(con.page);
                            $("#sum").html(con.sum);
                            var data=con.list;
                            var len=data.length;
                            console.log(data);
                            for (var i = 0; i <= len-1; i++) {
                              var itemid=data[i].id;
                              html+= '<tr id="xg'+itemid+'"><th class="txt" id="msgid">'+itemid+'</th>'
                                    +'<th class="txt txt-l" id="title">'+data[i].title+'</th>'+
                                    '<th class="txt-l-c"><div class="form-control txt con">'+data[i].content+'</div></th>'+'<th><input type="button" class="btn btn-default btn-sm"  value="标正面" onclick="upmark(\''+0+','+4+','+itemid+'\')"><input type="button" class="btn btn-default btn-sm"  onclick="upmark(\''+0+','+3+','+itemid+'\')" value="标中性"><input type="button" class="btn btn-default btn-sm"  onclick="upmark(\''+0+','+2+','+itemid+'\')" value="标负面"><input type="button" class="btn btn-warning btn-sm"  onclick="upmark(\''+0+','+12+','+itemid+'\')" value="标低垃圾度"><input type="button" class="btn btn-danger btn-sm"  onclick="upmark(\''+0+','+11+','+itemid+'\')" value="标高垃圾度"></th></tr>';
                            }
                            $("#datacontent").html(html);
                        }else{
                            // $("#selpage").val(page-1);
                            // selectdata(page-1);
                            return false;
                        }
                    },
                    error : function() {
                        alert("异常！");
                    }
                });
            } 
            function upmark(type,num,id) {
                var checkid="";
                var idarr=[];
                if(num==undefined && id==undefined){
                    a=type.split(',');
                    var type =a[0];
                    var num=a[1];
                    var id=a[2];
                }
                if (type=="0") {//单行操作
                    checkid=id;
                    console.log(id);
                }else{
                    idarr=getcheck();
                    checkid=JSON.stringify(idarr);
                    console.log(idarr);
                }
                
                $.ajax({
                    type: "POST",
                    url: "./demoupdate.php" ,
                    data: {"num":num,"id":checkid},
                    async:false,
                    dataType:'html',
                    success: function (result) {
                        if (result == 0) {
                            if(type=="1"){//多行操作
                                idslen=idarr.length;
                                for (var i = 0; i <= idslen-1; i++) {
                                    $("#xg"+idarr[i]).remove();
                                    console.log(idarr[i]+"已处理")
                                }
                            }else{
                                console.log(id+"已处理")
                                $("#xg"+id).remove();
                            }
                        }
                    },
                    error : function() {
                        alert("异常！");
                    }
                });
            }
        </script>  
    </body>  
</html>  